<template>
    <div>
        <pageHeader></pageHeader>
        <div class="body">
            <div class="container">
                <div class="article">
                    <h1 class="title" v-text="article.title"></h1>
                    <p hidden v-text="aid"></p>

                    <p class="info">
                        <span v-text="article.author.nickname"></span>
                        <span v-text="article.addTime"></span>
                        <router-link :to="'/update/' + aid">修改</router-link>
                        <router-link to="/delete">删除</router-link>
                    </p>

                    <p class="content" v-text="article.content"></p>
                </div>
            </div>
        </div>
        <pageFooter></pageFooter>
    </div>
</template>

<script>
import pageHeader from "@/components/commons/pageHeader";
import pageFooter from "@/components/commons/pageFooter";
export default {
    props: ["aid"],
    components: { pageHeader, pageFooter },
    data() {
        return {
            article: {
                // id: "",
                // title: "",
                // content: "",
                // addTime: "",
                // author: {
                //     id: "",
                //     nickname: "",
                // },
            },
        };
    },

    mounted() {
        this.loadArticle();
    },

    methods: {
        loadArticle() {
            this.$request.get("/api/article/" + this.aid).then((response) => {
                this.article = response.data.article;
            });
        },
    },
};
</script>

<style lang="less" scoped>
.article {
    .title {
        font-size: 26px;
        line-height: 40px;
    }

    .info {
        color: #999;
        border-bottom: 1px solid #ddd;
        margin: 20px 0;
        padding-bottom: 5px;

        span,
        a {
            margin-right: 10px;
        }
    }

    .content {
        text-align: justify;
        font-size: 17px;
        line-height: 30px;
        letter-spacing: 1px;
        text-indent: 2em;
    }
}
</style>